<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">项目列表</div>
      <Button type="primary" style="width:86px;height:32px;" @click="toAddProjectPage">新增</Button>
    </div>

    <div class="banner">
      <div class="search">
        <Input v-model="searchCond" type="text" placeholder="编号/项目/手机号/设备号" style="width:200px;" @keyup.enter.native="keyset($event)" />
        <span style="margin-left:30px;font-size:18px;line-height:16px;vertical-align: -3px;">项目类型:</span>
        <Select v-model="projectType" style="width:200px;margin-left:5px;" @on-change="selectProjectTypeFun">
          <Option :value="item.value" :label="item.label" v-for="(item,index) in selectList" :key="index"></Option>
        </Select>
        <Button type="primary" style="margin-left:20px;" @click="searchAction">确定</Button>
      </div>
      <div class="table">
        <Table :columns="columnsData" :data="projectInfoData" :border="true" :loading="isProjectShow">
          <template slot-scope="{ row, index }" slot="projectName">
            <Input type="text" v-model="editProjectName" v-if="editIndex === index" />
            <span v-else style="border-bottom:1px solid;">{{ row.projectName }}
            </span>
          </template>

          <template slot-scope="{ row, index }" slot="projectNumber">
            <Input type="text" v-model="editProjectNumber" v-if="editIndex === index" />
            <span v-else style="border-bottom:1px solid;">{{ row.projectNumber }}
            </span>
          </template>

          <template slot-scope="{ row, index }" slot="allotPeriod">
            <Input type="text" v-model="editProjectAllotPeriod" v-if="editIndex === index" />
            <span v-else style="border-bottom:1px solid;">{{ row.allotPeriod }}
            </span>
          </template>

          <template slot-scope="{ row, index }" slot="action">
            <div v-if="editIndex === index">
              <Button style="margin-right: 5px;" type="primary" @click="handleSave(index)">保存</Button>
              <Button @click="editIndex = -1">取消</Button>
            </div>
            <div v-else>
              <Button style="margin-right: 5px;" @click="handleEdit(row, index)">编辑</Button>
              <Button style="margin-right: 5px;" type="error" @click="remove(row, index)">删除</Button>
              <Button style="margin-right: 5px;" type="primary" v-if="row.userCount==1&&row.projectType==1" disabled>加用户</Button>
              <Button style="margin-right: 5px;" type="primary" @click="relateUser(row, index)" v-else>加用户</Button>
              <Button type="primary" style="margin-right: 5px;" @click="relateDevice(row, index)">加矿机</Button>
            </div>
          </template>
        </Table>
        <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total placement="top" @on-change="handlePage" style="margin-top:20px;"></Page>
      </div>
    </div>

    <Modal title="请选择需要关联项目的用户" v-model="relateUserShow" :mask-closable="false" width="80" @on-ok="bindingUser">
      <Input placeholder="用户/手机/钱包" style="width:200px;" v-model="searchRelateUser" />
      <Button type="primary" @click="searcheForUser" style="margin-left:20px;">查找</Button>
      <Table :columns="relateUserColumnsData" :data="relateUserShowData" :border="true" @on-selection-change="selectUser" style="margin-top:20px;height: 60%;" :loading="isRelateUserLoading"></Table>
      <Page :total="relateUserPageTotal" :current="relateUserPageNum" :page-size="relateUserPageSize" show-total placement="top" @on-change="relateUserHandlePage" style="margin-top:20px;"></Page>
    </Modal>
    <Modal title="请选择需要关联项目的设备" v-model="relateDeviceShow" :mask-closable="false" width="80" @on-ok="bindingDevice">
      <Input placeholder="设备ID/矿机编号/IP地址/地理位置" style="width:200px;" v-model="searchRelateDevice" @keyup.enter.native="keyset_1($event)" />
      <Button type="primary" @click="searcheForDevice" style="margin-left:20px;">查找</Button>
      <Table :columns="relateDeviceColumnsData" :data="relateDeviceShowData" :border="true" @on-selection-change="selectDeviceFun" style="margin-top:20px;height: 60%;" :loading="isRelateDeviceLoading"></Table>
      <Page :total="relateDevicePageTotal" :current="relateDevicePageNum" :page-size="relateDevicePageSize" show-total placement="top" @on-change="relateDeviceHandlePage" style="margin-top:20px;"></Page>
    </Modal>
  </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "ProjectList",
  data() {
    return {
      noProject: "all",
      //基础设置
      projectType: 5,
      isProjectShow: false,
      isRelateUserLoading: false,
      isRelateDeviceLoading: false,
      projectDefaultValue: 0,
      searchCond: "",
      selectList: [
        {
          value: 1,
          label: "通用"
        },
        {
          value: 2,
          label: "节点"
        },
        {
          value: 3,
          label: "共建"
        },
        {
          value: 4,
          label: "算力"
        },
        {
          value: 5,
          label: "共建2"
        },
        {
          value: 0,
          label: "全部"
        }
      ],

      //项目列表表格
      editProjectName: "",
      editProjectNumber: "",
      editIndex: "",
      pageTotal: 0,
      pageNum: 1,
      pageSize: 5,
      columnsData: [
        {
          title: "项目ID",
          key: "id",
          align: "center"
        },
        {
          title: "项目名称",
          key: "projectName",
          align: "center",
          slot: "projectName"
        },
        {
          title: "项目编号",
          key: "projectNumber",
          align: "center",
          slot: "projectNumber"
        },
        {
          title: "项目类型",
          key: "projectTypeName",
          align: "center"
        },
        {
          title: "所属矿场。",
          align: "center",
          width: 200,
          key: "minerField",
          render: (h, params) => {
            let minerField = null;
            if (params.row.minerField) {
              minerField = params.row.minerField;
            } else {
              minerField = "00";
            }
            return h(
              "Select",
              {
                props: {
                  value: minerField
                },
                on: {
                  "on-change": e => {
                    this.change(e, params);
                  }
                }
              },
              [h(
                "Option",
                {
                  props: {
                    value: "00"
                  }
                },
                "空"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "99"
                  }
                },
                "自建矿场"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "01"
                  }
                },
                "无锡矿场"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "02"
                  }
                },
                "常州矿场"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "03"
                  }
                },
                "贵州矿场"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "04"
                  }
                },
                "四川矿场"
              ),
              h(
                "Option",
                {
                  props: {
                    value: "05"
                  }
                },
                "鄂尔多斯矿场"
              )
              ]
            );
          }
        },
        {
          title: "结算周期",
          key: "allotPeriod",
          align: "center",
          slot: "allotPeriod"
        },
        {
          title: "用户",
          key: "userCount",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    borderBottom: "1px solid",
                    cursor: "pointer",
                    color: "red"
                  },
                  on: {
                    click: () => {
                      this.toProjectDetailPage(params);
                    }
                  }
                },
                this.projectInfoData[params.index].userCount
              )
            ]);
          }
        },
        {
          title: "矿机",
          key: "minerCount",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    borderBottom: "1px solid",
                    cursor: "pointer",
                    color: "red"
                  },
                  on: {
                    click: () => {
                      this.toProjectDetailPage_1(params);
                    }
                  }
                },
                this.projectInfoData[params.index].minerCount
              )
            ]);
          }
        },
        {
          title: "创建时间",
          key: "createdDate",
          align: "center"
        },
        {
          title: "操作",
          fixed: "right",
          width: 450,
          align: "center",
          slot: "action"
        }
      ],
      projectInfoData: [],

      //关联用户表格
      relateUserColumnsData: [
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "手机号码",
          key: "mobile"
        },
        {
          title: "钱包地址",
          key: "cashWallet"
        },
        {
          type: "selection",
          width: 60,
          align: "center"
        }
      ],
      relateUserShowData: [],
      relateUserPageTotal: 0,
      relateUserPageNum: 1,
      relateUserPageSize: 5,
      relateUserShow: false,
      searchRelateUser: "",
      selectedUser: [],

      //要关联的项目
      selectProject: "",
      selectProjectId: "",
      selectProjectType: "",

      //关联矿机表格
      relateDeviceColumnsData: [
        {
          title: "设备ID",
          key: "iotfsDevId",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    content: this.relateDeviceShowData[params.index].iotfsDevId,
                    maxWidth: "350"
                  }
                },
                this.hideWord(
                  this.relateDeviceShowData[params.index].iotfsDevId
                )
              )
            ]);
          }
        },
        {
          title: "矿机编号",
          key: "minerNo"
        },
        {
          title: "IP地址",
          key: "ipAddress"
        },
        {
          title: "地理位置",
          key: "address"
        },
        {
          title: "状态",
          key: "runningStatus"
        },
        {
          type: "selection",
          width: 60,
          align: "center"
        }
      ],
      relateDeviceShowData: [],
      relateDevicePageTotal: 0,
      relateDevicePageNum: 1,
      relateDevicePageSize: 5,
      selectDevice: "",
      relateDeviceShow: false,
      searchRelateDevice: "",
      selectedDevice: []
    };
  },
  created() {
    window.addEventListener("beforeunload", e => {
      localStorage.reLoad = "reLoadDeviceList";
      localStorage.name = "1-2";
    });
  },
  mounted() {
    this.getProjectData(this.require(), 0);
  },
  watch: {
    searchCond: function (value, odlValue) {
      if (!value) {
        let cond = {};
        cond = this.require();
        this.getProjectData(cond, 0);
      }
    },
    searchRelateDevice: function (value, odlValue) {
      if (!value) {
        this.getDeviceData(0, this.payloadRequire(), this.selectProjectId);
      }
    }
  },
  methods: {
    change(e, params) {
      let putData = params.row;
      this.projectInfoData[params.index].minerField = e;
      console.log(putData)
      this.putProject(e, putData)
    },
    ///////////////更新项目///////
    putProject(e, params) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let payload = {
        id: params.id,
        type: params.projectType,
        projectName: params.projectName,
        projectNumber: params.projectNumber,
        allotPeriod: params.allotPeriod,
        minerField: e
      }
      this.$axios({
        method: "put",
        url: apis.projectEdit,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            this.$Message.success("更新项目信息成功");
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    ///////////////TOOL METHOD/////////
    payloadRequire() {
      let cond = {};
      if (this.searchRelateDevice) {
        cond.keyword = this.searchRelateDevice;
      }
      return cond;
    },
    selectNoProjectFun() {
      this.getDeviceData(
        this.relateDevicePageNum - 1,
        this.payloadRequire(),
        this.selectProjectId
      );
    },
    handleEdit(row, index) {
      this.editIndex = index;
      this.editProjectName = row.projectName;
      this.editProjectNumber = row.projectNumber;
      this.editProjectAllotPeriod = row.allotPeriod;
    },

    handleSave(index) {
      //更新项目名称或者编号
      this.editIndex = -1;
      this.projectInfoData[index].projectName = this.editProjectName;
      this.projectInfoData[index].projectNumber = this.editProjectNumber;
      this.projectInfoData[index].allotPeriod = this.editProjectAllotPeriod;

      let payload = {
        id: this.projectInfoData[index].id,
        type: this.projectInfoData[index].projectType,
        projectName: this.projectInfoData[index].projectName,
        projectNumber: this.projectInfoData[index].projectNumber,
        allotPeriod: this.projectInfoData[index].allotPeriod,
        minerField: this.projectInfoData[index].minerField
      };

      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      this.$axios({
        method: "put",
        url: apis.projectEdit,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            this.$Message.success("更新项目信息成功");
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },

    ////////以下是关联用户的操作//////////
    //打开关联用户界面
    relateUser(row, index) {
      this.relateUserShow = true;
      this.selectProject = row.projectName
        ? row.projectName
        : row.projectNumber;
      this.selectProjectId = row.id;
      this.selectProjectType = row.projectType;
      this.getUserData(
        this.searchRelateUser,
        this.selectProjectId,
        this.relateUserPageNum - 1
      );
    },
    //用户条件搜索
    searchAction() {
      // if (!this.searchCond) {
      //   this.$Message.warning("请输入搜索条件");
      //   return;
      // }
      // if (this.projectType == 0) {
      //   this.projectType = "";
      // }
      this.getProjectData(this.require(), this.pageNum - 1);
    },
    //关联用户的勾选
    selectUser(selection, row) {
      //row:当前选中的项
      //selection:当前已经选中的所有项
      this.selectedUser = selection;
    },
    //关联用户翻页动作
    relateUserHandlePage(value) {
      this.relateUserPageNum = value;

      this.getUserData(
        this.searchRelateUser,
        this.selectProjectId,
        this.relateUserPageNum - 1
      );
    },
    //搜索用户
    searcheForUser() {
      this.relateUserPageNum = 1;
      this.getUserData(
        this.searchRelateUser,
        this.selectProjectId,
        this.relateUserPageNum - 1
      );
    },
    //关联用户界面消失
    cancelUser() {
      this.selectedUser = [];
      this.relateUserShow = false;
    },
    //绑定用户操作
    bindingUser() {
      if (this.selectedUser.length == 0) {
        this.$Message.warning("请选择要绑定的用户");
        return;
      }

      if (this.projectType == "1") {
        if (this.selectedUser.length == 2) {
          this.$Message.warning("通用类项目只能绑定一个");
          return;
        }
      }

      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let tempArr = [];
      this.selectedUser.forEach(element => {
        tempArr.push(element.userId);
      });

      let payload = {
        groupTypeValue: this.projectDefaultValue,
        projectGroupId: this.selectProjectId,
        relationType: "add",
        users: tempArr
      };

      this.$axios({
        method: "post",
        url: apis.bindingAction,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            let data = res.data;
            console.log(this.projectType);
            this.$Message.success("绑定用户成功");
            this.selectedUser = [];
            this.relateUserShow = false;
            // if (tempArr.length == 1) {
            //   this.projectConfigAction(this.selectProjectId, tempArr[0]);
            // }
            this.getProjectData(this.require(), this.pageNum - 1);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    projectConfigAction(projectId, userId) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.projectConfig + "/" + projectId + "/" + userId;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //获取所有用户列表
    getUserData(cond, notInProjectList, num) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let url = "";
      if (cond) {
        url =
          apis.addUserApi +
          "?" +
          "page=" +
          num +
          "&size=" +
          this.relateUserPageSize +
          "&keyword=" +
          cond +
          "&notInProjectList=" +
          notInProjectList;
      } else {
        url =
          apis.addUserApi +
          "?" +
          "page=" +
          num +
          "&size=" +
          this.relateUserPageSize +
          "&notInProjectList=" +
          notInProjectList;
      }
      this.isRelateUserLoading = true;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.isRelateUserLoading = false;

            let data = res.data;
            this.relateUserShowData = data;
            this.relateUserPageTotal = parseInt(res.headers["x-total-count"]);
            console.log(this.relateUserShowData);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },

    ///////以下是关联矿机的操作///////
    //打开关联矿机界面
    relateDevice(row) {
      if (row.userCount == 0) {
        this.$Message.info("请先为该项目添加用户");
        return;
      }
      this.relateDeviceShow = true;

      this.selectProject = row.projectName
        ? row.projectName
        : row.projectNumber;
      this.selectProjectId = row.id;
      this.selectProjectType = row.projectType;

      this.getDeviceData(
        this.relateDevicePageNum - 1,
        this.payloadRequire(),
        this.selectProjectId
      );
    },
    //关联矿机翻页操作
    relateDeviceHandlePage(value) {
      this.relateUserPageNum = value;
      this.getDeviceData(
        this.relateUserPageNum - 1,
        this.payloadRequire(),
        this.selectProjectId
      );
    },
    //关联矿机的勾选
    selectDeviceFun(selection, row) {
      this.selectedDevice = selection;
    },
    //搜索矿机
    searcheForDevice() {
      this.relateUserPageNum = 1;
      this.getDeviceData(
        this.relateUserPageNum - 1,
        this.payloadRequire(),
        this.selectProjectId
      );
    },
    //关闭关联矿机界面
    cancelDevice() {
      this.selectedDevice = [];
      this.relateDeviceShow = false;
    },
    //确认关联矿机
    bindingDevice() {
      if (this.selectedDevice.length == 0) {
        this.$Message.warning("请选择要绑定的设备");
        return;
      }

      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let tempArr = [];
      this.selectedDevice.forEach(element => {
        tempArr.push(element.id);
      });

      let payload = {
        groupTypeValue: this.projectDefaultValue,
        projectGroupId: this.selectProjectId,
        relationType: "add",
        miners: tempArr
      };

      this.$axios({
        method: "post",
        url: apis.bindingAction,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            let data = res.data;
            this.$Message.success("绑定矿机成功");
            this.relateDeviceShow = false;
            this.selectedDevice = [];
            this.getProjectData(this.require(), this.pageNum - 1);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    //矿机列表全部查询
    getDeviceData(pageNum, cond, notInProjectList) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      let url = "";
      if (cond) {
        url =
          apis.deviceList +
          "?" +
          "page=" +
          pageNum +
          "&size=" +
          this.relateDevicePageSize +
          "&notInProjectList=" +
          notInProjectList +
          "&hasProject=" +
          false;
        if (cond.keyword) {
          url = url + "&keyword=" + cond.keyword;
        }
      } else {
        url =
          apis.deviceList +
          "?" +
          "page=" +
          num +
          "&size=" +
          this.relateDevicePageSize +
          "&notInProjectList=" +
          notInProjectList +
          "&hasProject=" +
          false;
      }
      this.isRelateDeviceLoading = true;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.isRelateDeviceLoading = false;

            this.relateDeviceShowData = res.data;
            this.relateDeviceShowData.forEach(element => {
              if (element.runningStatus == 0) {
                element.runningStatus = "离线";
              } else if (element.runningStatus == 1) {
                element.runningStatus = "在线";
              }
            });
            this.relateDevicePageTotal = parseInt(res.headers["x-total-count"]);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },

    ///////////以下是项目列表的操作/////////////////////
    handlePage(value) {
      this.pageNum = value;
      this.getProjectData(this.require(), this.pageNum - 1);
    },
    //点击跳转项目详情页,定位用户
    toProjectDetailPage(params) {
      this.$router.push({
        name: "ProjectDetail",
        query: {
          param: params,
          proName: "relateUser"
        }
      });
    },
    //点击跳转项目详情页,定位设备
    toProjectDetailPage_1(params) {
      this.$router.push({
        name: "ProjectDetail",
        query: {
          param: params,
          proName: "relateDevice"
        }
      });
    },
    hideWord(string) {
      if (string) {
        string = String(string);
        let len = string.length;
        let stringBefore = string.slice(0, 9);
        let stringBeHand = string.slice(len - 5, len + 1);
        let newString = stringBefore + "..." + stringBeHand;
        return newString;
      } else {
        return;
      }
    },
    require() {
      let cond = {};
      if (this.searchCond) {
        cond.keyword = this.searchCond;
      }
      if (this.projectType) {
        cond.groupType = this.projectType;
      } else {
        if (this.projectType == 0) {
          cond.groupType = this.projectType;
        }
      }
      return cond;
    },
    //获取项目列表数据
    getProjectData(cond, pageNum) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = "";
      if (!cond) {
        url =
          apis.projectList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
      } else {
        url =
          apis.projectList + "?" + "page=" + pageNum + "&size=" + this.pageSize;
        if (cond.keyword) {
          url = url + "&keyword=" + cond.keyword;
        }
        console.log(cond.groupType);
        if (cond.groupType != 0) {
          url = url + "&groupType=" + cond.groupType;
        }
      }
      this.isProjectShow = true;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.isProjectShow = false;
            let data = res.data;
            this.pageTotal = parseInt(res.headers["x-total-count"]);
            data.forEach(element => {
              switch (element.projectType) {
                case 1:
                  element.projectTypeName = "通用";
                  break;

                case 2:
                  element.projectTypeName = "节点";
                  break;

                case 3:
                  element.projectTypeName = "共建";
                  break;

                case 4:
                  element.projectTypeName = "算力";
                  break;

                case 5:
                  element.projectTypeName = "共建2";
                  break;

                default:
                  break;
              }
            });
            this.projectInfoData = data;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },

    //删除项目
    remove(row, index) {
      if (row.userCount) {
        this.$Message.error("用户还未全部解除关联");
        return;
      }
      if (row.minerCount) {
        this.$Message.error("矿机还未全部解除关联");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "<div>项目：" + "<" + row.projectName + ">" + "正在删除</div>",
        onOk: () => {
          let token = this.$localStorage.storageGet("TOKEN");
          if (!token) {
            this.$router.push({
              name: "Login"
            });
            return;
          }

          let url = apis.projectDelete + "/" + row.id;

          this.$axios({
            method: "delete",
            url: url,
            headers: {
              Authorization: "Bearer " + token
            }
          })
            .then(res => {
              if (res.status == "200") {
                this.$Message.info("项目已删除");
                this.getProjectData(this.require(), this.pageNum - 1);
              } else {
                this.$Message.error(res.data.detail);
              }
            })
            .catch(err => {
              this.$Message.error(err.response.data.message);
            });
        },
        onCancel: () => {
          this.$Message.info("已取消");
        }
      });
    },
    //跳转到新增项目页面
    toAddProjectPage() {
      this.$router.push({
        name: "AddProject"
      });
    },
    selectProjectTypeFun() {
      this.getProjectData(this.require(), this.pageNum - 1);
    },
    keyset(ev) {
      if (ev.keyCode == 13) {
        let cond = this.require();
        this.getProjectData(this.require(), this.pageNum - 1);
      }
    },
    keyset_1(ev) {
      if (ev.keyCode == 13) {
        let cond = this.require();
        this.getDeviceData(
          this.relateDevicePageNum - 1,
          this.payloadRequire(),
          this.selectProjectId
        );
      }
    }
  }
};
</script>

<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.title {
  color: #666;
  font-size: 24px;
}

.banner {
  margin-top: 20px;
}

.table {
  margin-top: 20px;
}

.relateUserView {
  height: 80%;
}

.relateButton {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.relateUser {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: scroll;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateUserTitle {
  font-size: 20px;
  margin-bottom: 20px;
}

.relateDevice {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateDeviceTitle {
  font-size: 20px;
  margin-bottom: 20px;
}
</style>